import React from 'react';
import { Layout } from 'antd';
import { Tabs } from 'react-vant'
import { ProductCard, Tag, Button } from 'react-vant';

const items = Array.from({ length: 3 }, (_, i) => i + 1)
const { Header, Footer, Content } = Layout;

const headerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#000',
  height: 64,
  paddingInline: 48,
  lineHeight: '64px',
  backgroundColor: '#ccc',
};

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#000',
  backgroundColor: '#fff',
};

const footerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#ccc',
};

function App() {
  return (
    <div>
      <Layout style={{ width: '100vw', height: '100vh' }}>
        <Header style={headerStyle}>我的订单</Header>
        <Content style={contentStyle}>
          <Tabs defaultActive={2}>
            <Tabs active={1}>
              <Tabs.TabPane title='待接单'>
                <ProductCard
                  num="2" price="￥100.00"
                  desc="描述信息(含餐盒费用2.00￥)"
                  thumb="https://img.yzcdn.cn/ipad.jpeg"/>
                  <ProductCard
                  num="2" price="￥100.00"
                  desc="描述信息(含餐盒费用2.00￥)"
                  thumb="https://img.yzcdn.cn/ipad.jpeg"/>
                  <ProductCard
                  num="2" price="￥100.00"
                  desc="描述信息(含餐盒费用2.00￥)"
                  thumb="https://img.yzcdn.cn/ipad.jpeg"/>
                  <ProductCard
                  num="2" price="￥100.00"
                  desc="描述信息(含餐盒费用2.00￥)"
                  thumb="https://img.yzcdn.cn/ipad.jpeg"/>
              </Tabs.TabPane>
              <Tabs.TabPane title='待发出'>内容2</Tabs.TabPane>
              <Tabs.TabPane title='待送达'>内容3</Tabs.TabPane>
              <Tabs.TabPane title='已完成'>内容4</Tabs.TabPane>
              <Tabs.TabPane title='取消/退款'>内容5</Tabs.TabPane>
            </Tabs>
          </Tabs>
        </Content>
        <Footer style={footerStyle}></Footer>
      </Layout>
    </div>
  );
}

export default App;
